<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>更换封面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css" />
		<link rel="stylesheet" type="text/css" href="../css/together.css" />
		<link rel="stylesheet" type="text/css" href="../css/cropper.css" />

		<style type="text/css">
			.main {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-flow: wrap;
			}
			
			.cover {
				margin: 5% auto;
				background-color: white;
				position: relative;
			}
			
			.w100 {
				width: 100%;
			}
			
			.box {
				width: 100%;
				height: auto;
				max-height: 100%;
				z-index: 2;
			}
			
			.box>img {
				width: 100%;
				max-height: 100%;
				border: 1px dashed #c7c7c7;
			}
			
			.box2 {
				width: 90%;
				margin: auto;
				max-height: 100%;
				z-index: 2;
			}
			
			.box2>img {
				width: 100%;
				max-height: 100%;
				border: 1px dashed #c7c7c7;
			}
			
			.imgfm {
				width: 80%;
				height: auto;
				margin: 1em auto;
			}
			
			.sminput {
				width: 100%;
				font-size: 1.1em;
				border: 1px dashed #c7c7c7;
			}
			
			.zzinput {
				width: 100%;
				font-size: 0.8em;
				height: 2em;
				border: 1px dashed #c7c7c7;
			}
			
			.jjinput {
				width: 95%;
				bottom: 10%;
				font-size: .8em;
				font-family: '微软雅黑';
				text-align: center;
				padding: 0.2em 0;
				word-wrap: break-word;
    			word-break: break-all;
			}
			
			.ic {
				height: 100%;
				display: flex;
				align-items: center;
				font-family: Muiicons;
				font-size: 1em;
				line-height: 1;
				z-index: 20;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			#imgdiv>img {
				width: 100%;
			}
			
			.footdivcss {
				width: 100%;
				text-align: center;
			}
			
			.mui-slider-indicator {
				bottom: 0;
			}
			.rboder .box>img,.rboder .zzinput,.rboder .sminput,.rboder .jjinput{
				border:0; 
			}
			.mui-content{ margin-bottom:0;}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav m_barC">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">更换封面</h1>
			<a class="ic mui-icon-right-nav mui-pull-right" id="new_books">保存</a>
		</header>
		<div class="mui-content">
			<div class="main">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
					
						<div class="mui-slider-item mui-slider-item-duplicate">
							<div class="cover" id="cover5" onclick="con(this.id)">
								<div class="box">
									<img id="imgid5" src="img/fm04.png" />
								</div>
								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding: 0.5em;">
										<input id="bookname5" type="" class="sminput" name="" id="" placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1em;">
										<input id="author5" type="" class="zzinput" name="" id="" placeholder="作者" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding: 1em;">
										<textarea id="introduction5" rows="3" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<div class="cover" id="cover1" onclick="con(this.id)">
								<div class="box">
									<img id="imgid1" src="img/fm01.png" />

									<!--<img id="imgid1" src="http://ws.rovine.cn/uploads/20190118/7b7074182a2da8a1fea6e82b0ba01df9.png" crossorigin="use-credentials" />-->

								</div>
								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding: 0.5em;">
										<input id="bookname1" type="" class="sminput textc" name="" placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1em;">
										<input id="author1" type="" class="zzinput textc" name=""  placeholder="作者" value="" />
									</div>
									<div style="width: 100%;margin-top: 15%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding: 1em;">
										<textarea id="introduction1" rows="3" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<div class="cover" id="cover2" onclick="con(this.id)">
								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding:15% 0.5em 0 0.5em;">
										<input id="bookname2" type="" class="sminput textc" name="" placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1% 1em 0.2em 1em">
										<input id="author2" type="" class="zzinput textc" name=""  placeholder="作者" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:12% 1em 5% 1em;">
										<textarea id="introduction2" rows="3" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<div class="box">
									<img id="imgid2" src="img/fm03.png" />
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>

						<!-- 第三张 -->
						<div class="mui-slider-item">
							<div class="cover" id="cover3" onclick="con(this.id)">

								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding:8% 5% 0.2em 5%;">
										<input id="bookname3" type="" class="sminput textr" name=""  placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:0.2em 5%;">
										<input id="author3" type="" class="zzinput textr" name="" iplaceholder="作者" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1em 2%;">
										<textarea id="introduction3" rows="2" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<div class="box2">
									<img id="imgid3" src="img/fm02.png" />
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>
						<!-- 第四张 -->

						<div class="mui-slider-item">
							<div class="cover" id="cover4" onclick="con(this.id)">
								<div class="box">
									<img id="imgid4" src="img/fm04.png" />
								</div>
								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding: 0.5em;">
										<input id="bookname4" type="" class="sminput" name="" placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1em;">
										<input id="author4" type="" class="zzinput" name="" placeholder="作者" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding: 1em;">
										<textarea id="introduction4" rows="3" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					
						<div class="mui-slider-item mui-slider-item-duplicate">
							<div class="cover" id="cover6" onclick="con(this.id)">
								<div class="box">
									<img id="imgid6" src="img/fm01.png" />

									<!--<img id="imgid1" src="http://ws.rovine.cn/uploads/20190118/7b7074182a2da8a1fea6e82b0ba01df9.png" crossorigin="use-credentials" />-->

								</div>
								<div class="w100">
									<div style="width: 100%; font-size: 1.5em;font-family: '微软雅黑';font-weight: 600;text-align: center;padding: 0.5em;">
										<input id="bookname6" type="" class="sminput textc" name="" placeholder="书名" value="" />
									</div>
									<div style="width: 100%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding:1em;">
										<input id="author6" type="" class="zzinput textc" name="" placeholder="作者" value="" />
									</div>
									<div style="width: 100%;margin-top: 15%; font-size:0.8em;font-family: '微软雅黑';text-align: center;padding: 1em;">
										<textarea id="introduction6" rows="3" maxlength="100"   class="jjinput textc" name=""  placeholder="简介" value=""></textarea>
									</div>
								</div>
								<!--<div style="position: absolute;bottom: 2%;width: 100%;text-align: center;z-index: 1;">
									logo
								</div>-->
							</div>
						</div>
					</div>

					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>

			</div>

			<div class="footdivcss">
				仅供参考，请以打印的PDF为准
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/cropper.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var bid = 0,
				fid = 1,
				mid = 22;
				



			window.onload = function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				bid = getrequest().bid;
				console.log(bid)
				let cover = document.getElementsByClassName("cover");
				//console.log(cover);
				for(let i = 0; i < cover.length; i++) {
					cover[i].style.width = w - 20 + "px";
					cover[i].style.height = (w - 20) * z + "px";
				}
				mui.plusReady(function() {
					let view = plus.webview.currentWebview();
					bid = view.bid;
					seteventlist();
				})
				getbook_cover_info();
				document.querySelector('.mui-slider').addEventListener('slide', function(event) {
					fid = (event.detail.slideNumber + 1);
				});
				g("new_books").addEventListener("tap", function(e) {

					var btnArray = ['否', '是'];
					mui.confirm('是否保存当前封面，确认？', '', btnArray, function(e) {
						if(e.index == 1) {
							let title = g("bookname" + fid).value;
							let introduction = g("introduction" + fid).value;
							let author = g("author" + fid).value;
							let mid2 = g("imgid" + fid).alt;
							if(mid == "" || mid == undefined || mid == "undefined" || mid == null) {
								mui.toast("操作失误，请确认封面");
								return;
							}
							$("#cover" + fid).addClass("rboder");
							let coverimgid = g("cover" + fid);
							
							html2canvas(coverimgid, {
								allowTaint: true,
								taintTest: false,
								onrendered: function(canvas) {
									var base64 = canvas.toDataURL();
									
//									getBase64Image(base64, function(res) {
//										console.log(res.dataURL,"2");
										let data = {
											url: '/api/Image/uploadBase64',
											data: {
												access_token: acctoken(),
												base64:base64
											}
										}
							ajaxbase64(data,function(res2){
										let data2 = {
											url: "/api/Book/add_book_cover",
											data: {
												access_token: acctoken(),
												mid: g("imgid" + fid).alt || mid,
												bmid:res2.data[0].mid|| mid,
												title: title,
												author: author,
												introduction: introduction,
												bid: bid,
												cid: fid,
											}
										}
										ajax(data2, function(res3) {
											$("#cover" + fid).removeClass("rboder");
											
										})

									});
//								}) base64
								}
							})
						}
					})
				})
			}

			function seteventlist() {
				for(let i = 1; i < 5; i++) {
					g("imgid" + i).addEventListener("tap", function(e) {
						page.imgUp();
					})
				}
			}

			function getbook_cover() {
				let data = {
					url: "/api/Book/book_cover",
					data: {
						access_token: acctoken(),
					}
				}
				ajax(data, function(res) {
					console.log(res);

				})
			}

			function getBases64(url, ext, callback) {
				var canvas = document.createElement("canvas"); //创建canvas DOM元素
				var ctx = canvas.getContext("2d");
				var img = new Image;
				img.crossOrigin = 'Anonymous';
				img.src = url;
				img.onload = function() {
					canvas.width = img.width; //指定画板的宽度，自定义
					canvas.height = img.height; //指定画板的高度,自定义
					ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
					var dataURL = canvas.toDataURL("image/" + ext);
					callback.call(this, dataURL); //回掉函数获取Base64编码
					canvas = null;
				};
			}

			function getbook_cover_info() {
			
				let data = {
					url: "/api/Book/book_cover_info",
					data: {
						access_token: acctoken(),
						bid: bid,
					}
				}
				ajax(data, function(res) {
				
					let title = res.data[0].title;
					let introduction = res.data[0].introduction;
					let author = res.data[0].author;
					mid = res.data[0].mid;
					//console.log("test1");
					//getBase64Image(res.data[0].path,function(res2){
					//	console.log("test2");
					//g("imgid"+res.data[0].cid).src = res2.dataURL;
					//let base64 = getBase64(res.data[0].path);
					//console.log(base64)
					//})
					//					getBases64()
					//					getBases64(res.data[0].path, 'png', function(base64){
					// 给原生img对象的src属性赋值
					//					    g("imgid"+res.data[0].cid).src = base64;
					//					})
					g("imgid" + res.data[0].cid).src = res.data[0].path;
					mui('.mui-slider').slider().gotoItem(res.data[0].cid - 1, 0)
					for(let i = 1; i < 7; i++) {
						g("bookname" + i).placeholder = title + '(书名)';
						g("introduction" + i).placeholder = introduction + '(简介)';
						g("author" + i).placeholder = author + '(作者)';
					}

				})

			}
			
	

			function con(id) {
				console.log(id);
			}

			function getfmlist() {
				let data = {
					url: "/api/Book/book_cover",
					data: {
						access_token: acctoken(),
					}
				}
				ajax(data, function(res) {
					console.log("封面列表", res);
					let str = "";
					for(let i = 0; i < res.data.length; i++) {
						str += '<img src="' + hurl + res.data[i].image + '">'
					}
					//g("imgdiv").innerHTML = str;
				})
			}
			//http://ws.rovine.cn/static/index/images/a4.jpg
			var page = null;
			page = {
				imgUp: function() {
					var m = this;
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: [{
								title: "拍照"
							},
							{
								title: "从相册中选择"
							}
						]
					}, function(e) { //1 是拍照  2 从相册中选择  
						switch(e.index) {
							case 1:
								appendByCamera();
								break;
							case 2:
								appendByGallery();
								break;
						}
					});
				}
				//摄像头  
			}

			// 拍照添加文件
			function appendByCamera() {
				plus.camera.getCamera().captureImage(function(e) {
					console.log(e);
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						console.log('文件', entry);
						var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
						cutImage(imgSrc);
					}, function(e) {
						mui.toast("读取拍照文件错误：" + e.message);
					});

				});
			}

			// 从相册添加文件
			function appendByGallery() {
				plus.gallery.pick(function(a) {
					plus.io.resolveLocalFileSystemURL(a, function(entry) {
						plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
							root.getFile("head.png", {}, function(file) {
								//文件已存在
								file.remove(function() {
									console.log("删除成功");
									entry.copyTo(root, "head.png", function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
										console.log("e", e);
										//uploadHead(e); /*上传图片*/
										cutImage(e);
										//变更大的图预览的src
										//目前只有一张图暂且这样处理，后续需要用标准组件实现
									}, function(e) {
										console.log("copy img file:" + e.message);
									});
								}, function() {
									console.log("删除" + e.message)
								});
							}, function() {
								//文件不存在
								entry.copyTo(root, "head.png", function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
									console.log("path", path);
									//uploadHead(path); /*上传图片*/
									cutImage(path);
								}, function(e) {
									console.log("copy img file:" + e.message);
								});
							});
						}, function(e) {
							console.log("get _www folder fail");
						})
					}, function(e) {
						console.log("读取拍照文件错误" + e.message);
					})
				}, function(a) {}, {
					filter: "image"
				})
			}
			//上传头像图片

			//更新封面
			function update_head_img(e) {
				var imgurl = e.detail.img;
				getBase64Image(imgurl, function(res) {
					console.log("图片压缩成功");
					console.log(res.dataURL);
					console.log(res.dataURL.length);
					let data = {
						url: '/api/Image/uploadBase64',
						data: {
							access_token: acctoken(),
							base64: res.dataURL
						}
					}
					ajaxbase64(data, function(res2) {
						console.log(res2);
						console.log(JSON.stringify(res2));
						console.log("图片上传成功");
						g("imgid" + fid).src = res.dataURL;
						g("imgid" + fid).alt = res2.data[0].mid;
					})
				})

			}
			window.addEventListener("updateHeadImg", update_head_img); //添加自定义事件，其他页面调用

			function cutImage(path) {
				console.log(path);
				console.log(fid);
				let bili = 592 / 420;
				if(fid == 3) {
					bili = 530 / 590;
				}
				let list = {
					path: path,
					bmtype: bili,
					pageid: "setcover",
					returnfun: "updateHeadImg",
				}
				mui.openWindow({
					url: 'cropper.html',
					id: 'cropper',
					extras: list,
					show: {
						aniShow: 'zoom-fade-in',
						duration: 800
					},
					waiting: {
						autoShow: true
					}
				});
			}
		</script>

	</body>

</html>